<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件</title>
</head>

<body>
    <img id="img" src="img/03.png" />
    <br>
    <button id="up">上一张</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="down">下一张</button>
    <script>
        // 通过点击按钮来切换图片,即当按钮被点击时,img的src也需要改变
        let up = document.getElementById('up');
        up.onclick = upimage;//当up按钮被单击时,触发upimage函数
        let down = document.getElementById('down');
        down.onclick = downimage;//当down按钮被单击时,触发downimage函数
        //完成显示上一张图片的功能
        let i = 3;
        function upimage() {
            i--;//做自减,调用时将会调取上一张图片
            if (i === 0) {
                //修改变量的值变为3
                i = 3;
            }
            let img = document.getElementById('img');
            //输出给定的图片
            img.src = `img/0` + i + ".png";//拼接方法只适用于个位数的图片,建议还是用数组来做

        }
        function downimage() {
            i++;//做自增,调用时将会调取下一张图片
            if (i === 4) {
                //修改变量的值变为1
                i = 1;
            }
            let img = document.getElementById('img');
            img.src = `img/0` + i + ".png";//拼接方法只适用于个位数的图片,建议还是用数组来做
        }


    </script>

</body>

</html>